<template>
  <div class="Header">
    <div class="header_bgc">
      <img
        class="bgc_over"
        src="@/assets/images/home_header.png"
        alt=""
      >
      <!-- 导航栏 -->
      <div class="Header_bottom_bar">
        <div class="Header_bottom_container">
          <div class="Header_bottom_nav">
            <div class="Header_bottom_collapse">
              <div class="icon_img">
                <img
                  src="/logo.png"
                  alt=""
                />
                <span class="header_text">综合素养挑战赛</span>
              </div>
              <ul>
                <li
                  :class="{ 'active': active === item.id }"
                  v-for="item in headeer_bar"
                  :key="item.id"
                  @click="handleActive(item.id)"
                >
                  <img
                    :src="item.icon"
                    alt=""
                  >
                  <a href="javascript:;">{{ item.name }}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 内容 -->
      <div class="main">
        <div class="container main_content">
          <!-- 左侧登录 -->
          <div class="main_left ">
            <span class="main_left_text">AI Will 综合素养挑战赛</span>
            <p>登录后即可报名比赛</p>
            <div class="main_btn">
              <span class="main_left_bt">注册</span>
              <span
                class="main_left_bt"
                @click="handleLogin"
              >登录</span>
            </div>
          </div>
          <!-- 右侧图片 -->
          <div class="main_right">
            <img
              src="@/assets/images/home_header_right.png"
              alt=""
            >
          </div>
        </div>
      </div>
      <!-- 比赛项目 -->
      <div class="competition">
        <div class=" container competition_content">
          <h3 class="content_h3">比赛项目</h3>
          <div class="content_list">
            <swiper
              :modules="modules"
              :initial-slide="1"
              :slides-perView="3"
              :space-between="0"
              :loop="true"
              :autoplay="{
                delay:300
              }"
              :centeredSlides="true"
            >
              <swiper-slide>
                <div class="list_row">
                  <div class="row_list">
                    <img
                      src="@/assets/images/row1.png"
                      alt=""
                    >
                  </div>
                  <div class="row_bgc">
                    <span>图形化编程</span>
                  </div>
                </div>

              </swiper-slide>
              <swiper-slide>
                <div class="list_row">
                  <div class="row_list">
                    <img
                      src="@/assets/images/row2.png"
                      alt=""
                    >
                  </div>
                  <div class="row_bgc">
                    <span>Python代码</span>
                  </div>
                </div>
              </swiper-slide>
              <swiper-slide>
                <div class="list_row">
                  <div class="row_list">
                    <img
                      src="@/assets/images/row3.png"
                      alt=""
                    >
                  </div>
                  <div class="row_bgc">
                    <span>C++代码</span>
                  </div>
                </div>
              </swiper-slide>
            </swiper>

          </div>
        </div>
      </div>
      <!-- 关于比赛 -->
      <div class="aboutcompetition">
        <div class="container aboutcompetition_content">
          <h3 class="content_h3">关于比赛</h3>
          <div class="textOrimg">
            <div class="content_text">
              <p>AIwill综合素养挑战赛是面向青少年的人工智能教育比赛项目。该项目需要根据自身特点，做出比赛组织、赛程安排、评分方法等方面的相关规定和说明。
              </p>
              <p>为了保证比赛的顺利进行，建立了一套比赛的整体概念准则。这些准则对于理解比赛的根本目的和要求有重要作用。</p>
            </div>

            <!-- 图片 -->
            <div class="footer_img">
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>


<script  setup>
import { onMounted, ref } from "vue";
import { useRouter } from 'vue-router';
import d1 from "@/assets/images/organ1.png"
import d2 from "@/assets/images/organ2.png"
import d3 from "@/assets/images/organ3.png"
import d4 from "@/assets/images/organ4.png"

// Import Swiper Vue.js components
import { Swiper, SwiperSlide } from 'swiper/vue';

// Import Swiper styles
import 'swiper/css';
// import 'swiper/css/bundle';

// import 'swiper/css/free-mode';
// import 'swiper/css/pagination';

// import '@/assets/style/swiper.css'


// import required modules
import { Autoplay } from 'swiper/modules';
const modules = [Autoplay]


const headeer_bar = [
  {
    id: 1,
    name: '首页',
    icon: d1,
  },
  {
    id: 2,
    name: '竞赛流程',
    icon: d2,
  },
  {
    id: 3,
    name: '通知公告',
    icon: d3,
  },
  {
    id: 4,
    name: '赛事帮助',
    icon: d4,
  }
];
const active = ref(1)
const handleActive = (activeId) => {
  active.value = activeId
};
const router = useRouter();
const handleLogin = () => {
  router.push('/auth/login')
}
const onSwiper = (swiper) => {




}
onMounted(() => {
  new Swiper('.swiper', {
    slidesPerView: 3,
    spaceBetween: 30,
    centeredSlides: true,
    loop: true,
    pagination: {
      el: '.swiper-pagination',
      clickable: true,
    },
  })
})
</script>

<style lang="scss" scoped>
.container {
  max-width: 1170px;
  width: 100%;
  padding-right: 15px;
  padding-left: 15px;
  margin-right: auto;
  margin-left: auto;
}
.header_bgc {
  width: 100%;
  height: 801px;
  position: relative;

  .bgc_over {
    width: 100%;
    height: 801px;
    margin-bottom: 68px;
    cursor: pointer;
  }
}
// 导航栏
.Header_bottom_bar {
  width: 100%;
  z-index: 99;
  position: absolute;
  top: 0;
  -webkit-transition: all ease 1s;
  transition: all ease 1s;
  .Header_bottom_container {
    max-width: 1170px;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
    //   导航栏
    .Header_bottom_nav {
      display: flex;
      align-items: center;
      flex-flow: row;
      justify-content: flex-start;
      // padding: 0 20px !important;
      // background-image: -webkit-linear-gradient(
      //   0deg,
      //   #5d5df9 0,
      //   #312366 100%
      // );
      z-index: 10;
      .Header_bottom_collapse {
        width: 100%;
        display: flex !important;
        flex-direction: row;
        flex-basis: auto;
        flex-grow: 1;
        flex: 1;
        align-items: center;
        .icon_img {
          display: flex;
          align-items: center;
        }
        .header_text {
          font-size: 24px;
          font-weight: 500;
          line-height: 78px;
          margin-left: 15px;
          margin-right: 83px;
          color: #ffffff;
        }
        ul {
          display: flex;
          li {
            cursor: pointer;
            display: flex;
            margin: 0;
            color: #fff;
            line-height: 1.7;
            font-size: 16px;
            padding: 25px 18px;
            transition: all 0.5s;
            align-items: center;
            img {
              width: 16px;
              height: 16px;
              margin-right: 8px;
            }
            a {
              color: #fff;
              font-weight: 400;
              align-items: center;
              font-size: 14px;
              text-transform: capitalize;
              border-bottom: 2px solid transparent;
              font-family: var(--heading-font);
            }
          }
          .active {
            background: rgba(255, 255, 255, 0.2);
            border-radius: 0px 0px 12px 12px;
          }
        }
      }
    }
  }
}
// 内容
.main {
  width: 100%;

  position: absolute;
  top: 0;
  margin-top: 237px;
  .main_content {
    display: flex;
  }
  .main_left {
    margin-right: 95px;
    .main_left_text {
      font-size: 36px;
      font-weight: normal;
      line-height: 36px;
      letter-spacing: 0px;
      color: #ffffff;
    }
    .main_btn {
      display: flex;
      .main_left_bt {
        cursor: pointer;
        width: 134px;
        height: 52px;
        border-radius: 8px;
        font-size: 24px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
        box-sizing: border-box;
        border: 2px solid #ffffff;
        &:nth-child(2) {
          margin-left: 53px;
          background-color: #fff;
          color: #1964d6;
        }
      }
    }

    p {
      margin: 31px 0 57px 0;
      font-size: 28px;
      font-weight: normal;
      line-height: 36px;
      letter-spacing: 0px;
      color: #ffffff;
    }
  }
  .main_right {
    position: absolute;
    right: 10%;
    top: -60%;
    width: 789px;
    height: 547px;
    img {
      width: 100%;
      height: 100%;
    }
  }
}
// 比赛项目
.competition {
  width: 100%;
  margin-bottom: 83px;
  .competition_content {
    display: flex;
    flex-direction: column;

    .content_h3 {
      text-align: center;
      font-size: 36px;
      font-weight: normal;
      line-height: 36px;
      letter-spacing: 0px;

      color: #1964d6;
      margin-bottom: 30px;
    }
    .content_list {
      // width: 960px;
      // margin: 0 auto;
      display: flex;
      justify-content: center;
      /* 外层容器 */
      .swiper {
        width: 1024px;
        height: 300px;
      }

      .swiper-slide {
        text-align: center;
        /* Center slide text vertically */
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex;
        // display: flex;
        // -webkit-box-pack: center;
        // -ms-flex-pack: center;
        // -webkit-justify-content: center;
        // justify-content: center;
        // -webkit-box-align: center;
        // -ms-flex-align: center;
        // -webkit-align-items: center;
        // align-items: center;
        transition: 300ms;
        transform: scale(0.8);
        z-index: 1;
      }
      .swiper-slide-active,
      .swiper-slide-duplicate-active {
        transform: scale(1) translateX(0%);
        z-index: 9;
      }
      .swiper-slide-prev {
        transform: translateX(20%) scale(0.8);
      }
      .swiper-slide-next {
        transform: translateX(-20%) scale(0.8);
      }
      .list_row {
        position: relative;
        width: 100%;
        // width: 100%;
        height: 280px;
        border-radius: 30px;
        padding-top: 8px;
        background: rgba(25, 100, 214, 0.1);
        box-sizing: border-box;
        border-image: linear-gradient(
            129deg,
            rgba(255, 255, 255, 0.3) 2%,
            rgba(0, 0, 0, 0.3) 101%
          )
          1;

        backdrop-filter: blur(20px);
        .row_list {
          display: flex;
          justify-content: center;
          align-items: center;
        }
        .row_bgc {
          position: absolute;
          bottom: 0;
          width: 100%;
          text-align: center;
          background: rgba(25, 100, 214, 0.6);
          // width: 380px;
          height: 60px;
          line-height: 60px;
          border-radius: 0px 0px 30px 30px;
          box-sizing: border-box;
          z-index: 2;
          border-image: linear-gradient(
              105deg,
              rgba(255, 255, 255, 0.3) 6%,
              rgba(0, 0, 0, 0.3) 97%
            )
            1;
          span {
            font-size: 24px;
            font-weight: normal;
            line-height: 31.2px;
            letter-spacing: 0px;

            color: #ffffff;
          }
        }
      }
      .carousel_list {
        // display: flex;
        // justify-content: center;
        width: 100%;
        .carousel_item_list {
          width: 100%;
          height: 100%;
          display: flex;
          justify-content: center;
        }
      }
    }
  }
  .el-carousel__item--card {
    width: auto;
  }
}
// 关于比赛
.aboutcompetition {
  width: 100%;
  height: 554px;
  opacity: 1;

  background: rgba(25, 100, 214, 0.1);
  .aboutcompetition_content {
    width: 100%;
    height: 100%;
    .content_h3 {
      padding-top: 83px;
      font-size: 36px;
      font-weight: normal;
      line-height: 36px;
      letter-spacing: 0px;

      color: #1964d6;
    }
    .textOrimg {
      display: flex;
      .content_text {
        width: 601px;
        height: 294px;
        margin-top: 58px;
        margin-right: 101px;
        p {
          font-size: 24px;
          font-weight: normal;
          line-height: 36px;
          text-align: justify; /* 浏览器可能不支持 */
          letter-spacing: 0px;

          color: #333333;
        }
      }
      .footer_img {
        position: relative;
        width: 460px;
        height: 311px;
        border-radius: 8px;
        background: #1964d6;
        backdrop-filter: blur(10px);

        border-radius: 8px;

        &::before {
          content: '';
          position: absolute;
          top: 20px;
          right: 20px;
          width: 460px;
          height: 311px;
          background: url('@/assets/images/footer_school.png');
        }
      }
    }
  }
}
</style>